<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>Form Elements - Ace Admin</title>

		<meta name="description" content="Common form elements and layouts" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="assets/font-awesome/4.2.0/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="assets/css/chosen.min.css" />
		<link rel="stylesheet" href="assets/css/datepicker.min.css" />
		<link rel="stylesheet" href="assets/css/bootstrap-timepicker.min.css" />
		<link rel="stylesheet" href="assets/css/daterangepicker.min.css" />
		<link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.min.css" />
		<link rel="stylesheet" href="assets/css/colorpicker.min.css" />
		<link rel="stylesheet" href="assets/css/epoint_css.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="assets/fonts/fonts.googleapis.com.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="assets/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="no-skin">
		<div id="navbar" class="navbar navbar-default">
			<script type="text/javascript">
				try{ace.settings.check('navbar' , 'fixed')}catch(e){}
			</script>

			<div class="navbar-container" id="navbar-container">
				<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
					<span class="sr-only">Toggle sidebar</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>

				<div class="navbar-header pull-left">
					<a href="index.html" class="navbar-brand">
						<small>
							<i class="fa fa-leaf"></i>
							Ace Admin
						</small>
					</a>
				</div>
			</div><!-- /.navbar-container -->
		</div>

		<div class="main-container" id="main-container">
			<script type="text/javascript">
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
			</script>

			<div id="sidebar" class="sidebar                  responsive">
				<script type="text/javascript">
					try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
				</script>
				<ul class="nav nav-list">
					<li class="">
						<a href="#" onclick="javascript:heh()">
							<i class="menu-icon fa fa-tachometer"></i>
							<span class="menu-text"> Dashboard </span>
						</a>

						<b class="arrow"></b>
					</li>
 
				</ul><!-- /.nav-list -->

				<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
					<i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
				</div>

				<script type="text/javascript">
					try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
				</script>
			</div>

			<div class="main-content">
				<div class="main-content-inner">
					<div class="page-content">
						<div class="row">
							<div class="row">
								<div class="col-sm-3">
									<div>
										<select class="chosen-select form-control" id="form-field-select-3" data-placeholder="Choose a State...">
											<option value="">  </option>
											<option value="WA">Washington</option>
											<option value="WV">West Virginia</option>
											<option value="WI">Wisconsin</option>
											<option value="WY">Wyoming</option>
										</select>
									</div>
								</div>
								<div class="col-sm-3">
									<div>
										<select class="chosen-select form-control" id="form-field-select-3" data-placeholder="Choose a State...">
											<option value="">  </option>
											<option value="WA">Washington</option>
											<option value="WV">West Virginia</option>
											<option value="WI">Wisconsin</option>
											<option value="WY">Wyoming</option>
										</select>
									</div>
								</div>
								<div class="col-sm-12">
									<div class="widget-box">
										<div class="widget-header widget-header-flat widget-header-small">
											<h5 class="widget-title">
												Docker版本:<span class="label label-purple label-white middle">1.9.0</span>
												Agent版本:<span class="label label-purple label-white middle">1.0</span>
												资源Tag:<span class="label label-purple label-white middle">nginx</span>
												容器个数:<span class="label label-purple label-white middle">19</span>
											</h5>
										</div>
										<div class="widget-body">
											<div class="widget-main">
											<div class="row">
													<div class="col-sm-12">
														<div class="row">
															<div class="col-xs-4 center">
																<div class="easy-pie-chart percentage" data-percent="20" data-color="#D15B47">
																	<span class="percent">20</span>%
																</div>
																<div>CPU</div>
															</div><!-- /.col -->
															<div class="col-xs-4 center">
																<div class="easy-pie-chart percentage" data-percent="20" data-color="#D15B47">
																	<span class="percent">20</span>%
																</div>
																<div>MEM</div>
															</div><!-- /.col -->
															
														</div><!-- /.row -->
													</div><!-- /.col -->
												</div><!-- /.row -->
												<div class="row" > 
													<div class="col-sm-12">
													<div class="tabbable">
														<ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab4">
															<li class="active">
																<a data-toggle="tab" href="#home4">数据统计</a>
															</li>

															<li>
																<a data-toggle="tab" href="#profile4">环境变量</a>
															</li>
															<li>
																<a data-toggle="tab" href="#dropdown14">存储卷</a>
															</li>
															<li>
																<a data-toggle="tab" href="#network">网络信息</a>
															</li>
															<li>
																<a data-toggle="tab" href="#woring">告警信息</a>
															</li>
															<li>
																<a data-toggle="tab" href="#resoule">配额设置</a>
															</li>
														</ul>

														<div class="tab-content">
															<div id="home4" class="tab-pane in active">
																<p>
																<div class="row">
																	<div class="col-sm-12">
																		<div class="dropdown dropdown-preview">
																			<ul class="dropdown-menu">
																				<li>
																					<a href="#" tabindex="-1">CPU</a>
																				</li>
																			</ul>
																		</div>
																		<div class="dropdown dropdown-preview">
																			<ul class="dropdown-menu">
																				<li>
																					<a href="#" tabindex="-1">CPU</a>
																				</li>
																			</ul>
																		</div>
																		<div class="dropdown dropdown-preview">
																			<ul class="dropdown-menu">
																				<li>
																					<a href="#" tabindex="-1">CPU</a>
																				</li>
																			</ul>
																		</div>
																		<div class="dropdown dropdown-preview">
																			<ul class="dropdown-menu">
																				<li>
																					<a href="#" tabindex="-1">CPU</a>
																				</li>
																			</ul>
																		</div>
																	</div>
																</div>
																</p>
															</div>
															<div id="profile4" class="tab-pane">
																<p>
																<!-- 环境变量部分 -->
																<div class="row">
																		<div class="col-xs-12">
																			<div class="clearfix">
																				<div class="pull-right tableTools-container">
																				<p>
																					<button type="button" class="btn btn-white">功能按钮</button>
																				</p>
																				</div>
																			</div>
																			<div class="table-header">
																				容器列表
																			</div>
																			<div>
																				<table id="dynamic-table" class="table table-striped table-bordered table-hover">
																					<thead>
																					<tr>
																						<th class="center">
																							<label class="pos-rel">
																								<input type="checkbox" class="ace" />
																								<span class="lbl"></span>
																							</label>
																						</th>
																						<th>序号</th>
																						<th>名称</th>
																						<th>状态</th>
																						<th>镜像</th>
																						<th>IP</th>
																						<th>创建用户</th>
																						<th>资源Tag</th>
																					</tr>
																					</thead>
																					<tbody>
																					<tr>
																						<td class="center">
																							<label class="pos-rel">
																								<input type="checkbox" class="ace" />
																								<span class="lbl"></span>
																							</label>
																						</td>
																						<td>1</td>
																						<td><a href="#">tpframe:v1</a></td>
																						<td class="hidden-480"><span class="label label-sm label-success">Running</span></td>
																						<td>docker.epoint.com.cn:443/libs/tpframe:v1</td>
																						<td>192.168.109.13</td>
																						<td class="hidden-480">
																							epointAdmin
																						</td>
																						<td>
																							WEB Apps
																						</td>
																					</tr>
																					</tbody>
																				</table>
																			</div>
																		</div>
																</div>
																</p>
															</div>
															<div id="dropdown14" class="tab-pane">
																<p>
																<div class="row">
																	<div class="col-xs-12">
																		<div class="clearfix">
																			<div class="pull-right tableTools-container">
																			<p>
																				<button type="button" class="btn btn-white">功能按钮</button>
																			</p>
																			</div>
																		</div>
																		<div class="table-header">
																				镜像列表
																		</div>                                             
																			<table id="dynamic-table" class="table table-striped table-bordered table-hover">
																				<thead>
																					<tr>
																						<th class="center">
																							<label class="pos-rel">
																								<input type="checkbox" class="ace" />
																								<span class="lbl"></span>
																							</label>
																						</th>
																						<th>序号</th>
																						<th>镜像名称</th>
																						<th>创建时间</th>
																						<th>大小</th>
																					</tr>
																				</thead>
																				<tbody>
																					<tr>
																						<td class="center">
																							<label class="pos-rel">
																								<input type="checkbox" class="ace" />
																								<span class="lbl"></span>
																							</label>
																						</td>
																						<td>1</td>
																						<td><a href="#">docker.epoint.com.cn:443/libs/tomcat:v1</a></td>
																						
																						<td>2015-05-10</td>
																						<td>544M</td>
																					</tr>
																				</tbody>
																			</table>
																	</div>
																</div>
																</p>
															</div>
															<div id="network" class="tab-pane">
																<p>
																11111111111111
																</p>
															</div>
															<div id="woring" class="tab-pane">
																<p>
																2222222222222
																</p>
															</div>
															<div id="resoule" class="tab-pane">
																<p>
																434333333333333
																</p>
															</div>
														</div>
													</div>
												</div>
												</div>
											</div>
										</div>
									</div>
        						</div>
							</div>
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div>
			</div><!-- /.main-content -->
		</div><!-- /.main-container -->

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="assets/js/jquery.2.1.1.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
<script src="assets/js/jquery.1.11.1.min.js"></script>
<![endif]-->

		<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery.min.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->

		<!--[if lte IE 8]>
		  <script src="assets/js/excanvas.min.js"></script>
		<![endif]-->
		<script src="assets/js/jquery-ui.custom.min.js"></script>
		<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="assets/js/chosen.jquery.min.js"></script>
		<script src="assets/js/jquery.easypiechart.min.js"></script>
		<script src="assets/js/jquery.sparkline.min.js"></script>
		<script src="assets/js/jquery.flot.min.js"></script>
		<script src="assets/js/jquery.flot.pie.min.js"></script>
		<script src="assets/js/jquery.flot.resize.min.js"></script>
		<!--引入bootboxJS使用弹出窗口 -->
		<script src="assets/js/bootbox.min.js"></script>
		<script src="assets/js/jquery.gritter.min.js"></script>
		<script src="assets/js/spin.min.js"></script>

		<!-- page specific plugin scripts -->
		<script src="assets/js/bootstrap-datepicker.min.js"></script>
		<script src="assets/js/jquery.jqGrid.min.js"></script>
		<script src="assets/js/grid.locale-en.js"></script>
		
		<!-- page specific plugin scripts -->
		<script src="assets/js/jquery.dataTables.min.js"></script>
		<script src="assets/js/jquery.dataTables.bootstrap.min.js"></script>
		<script src="assets/js/dataTables.tableTools.min.js"></script>
		<script src="assets/js/dataTables.colVis.min.js"></script>
		<!-- ace scripts -->
		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>
		<script src="epoint_main_page_js.js"></script>
		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) {
				 var oldie = /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase());
                 $('.easy-pie-chart.percentage').each(function(){                     
					$(this).easyPieChart({
						barColor: $(this).data('color'),
						trackColor: '#EEEEEE',
						scaleColor: false,
						lineCap: 'butt',
						lineWidth: 8,
						animate: oldie ? false : 1000,
						size:75
					}).css('color', $(this).data('color'));
                });
				$('.chosen-select').chosen({allow_single_deselect:true}); 
			});
		</script>
	</body>
</html>
